<template>
    <div class='layout'>
        <!-- 导航 -->
        <footer>
            <nav>
                <router-link to="/home">首页</router-link>
                <router-link to="/order">订单</router-link>
                <router-link to="/mine">我的</router-link>
            </nav>
        </footer>

        <!-- 显示这个页面的子页面 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {}
    },
    components: {},
    created() { },
    mounted() { },
    methods: {}
}
</script>
<style scoped lang='scss'>
footer {
    width: 100vw;
    height: 60px;
    line-height: 60px;
    background-color: aquamarine;
    position: fixed;
    bottom: 0;
}


nav {
    display: flex;

    a {
        flex: 1;
        text-align: center;
        font-weight: bold;
        color: #2c3e50;
        text-decoration: none;

        // &.exact-active {
        //     color: red;
        // }
        &.active {
            color: blue;
        }
    }
}
</style>
